<template>
  <div class="params">
    <!-- 1.目录位置 -->
    <div class="nav">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/params' }"
          >相关参数</el-breadcrumb-item
        >
        <el-breadcrumb-item>规格与包装</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 2.搜索框 -->
    <div class="header">
      <el-input v-model="inp" @change="searchParams"  placeholder="请输入相关的参数内容"></el-input>
      <el-button type="primary">查看</el-button>
      <el-button type="primary" @click="showParams">添加</el-button>
    </div>
    <!-- 3.表格 -->
    <el-table :data="tableData" class="myTable" border>
      <el-table-column prop="itemCatId" label="规格参数的ID" width="120">
      </el-table-column>
      <el-table-column prop="id" label="类目ID" width="120"> </el-table-column>
      <el-table-column prop="specsName" label="规格名称" width="150">
      </el-table-column>
      <el-table-column prop="paramData" label="规格参数" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleParams(scope.$index, scope.row)"
            ><i class="el-icon-edit"></i>编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="deleteParams(scope.$index, scope.row)"
            ><i class="el-icon-delete"></i>删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 4.分页 -->
    <Pagination :total="total" :pageSize="pageSize" @changePage="changePage" />
    <!-- 5.弹框 -->
    <ParamsDialog ref="dialog" :title="title"  :parentId="dialogEditId"/>
  </div>
</template>

<script>
import Pagination from "../../../components/Pagination.vue";
import ParamsDialog from "./ParamsDialog.vue";
export default {
  components: {
    Pagination,
    ParamsDialog,
  },
  data() {
    return {
      dialogEditId: "", // 你自己调位置
      inp: "", //输入款
      tableData: [], // 表格数据
      total: 10,
      pageSize: 1,
      paramsList: [], //规格参数条数
      type: 1,
      title: "添加规格与参数",
    };
  },
  methods: {
    getHttp(page) {
      this.$api.getParams({ page }).then((res) => {
        console.log(res.data);
        if (res.data.status === 200) {
          this.tableData = res.data.data;
          this.total = res.data.total;
          this.pageSize = res.data.pageSize;
        }
      });
    },
    //分页页码
    changePage(num) {
      if ((this.type = 1)) {
        this.getHttp(num); //商品列表分页
      } else {
        //搜索分页
        console.log("搜索的分页处理----");
        this.tableData = this.list.slice((num - 1) * 3, num * 3);
      }
    },
    //规格参数--查询
    searchParams(value) {
      if (!value) {
        this.getHttp(1);
        return;
      } // console.log('搜索',value);
      this.$api
        .getSearchParams({
          search: value,
        })
        .then((res) => {
          console.log(res.data); //根据规格参数查询
          if (res.data.status === 200) {
            this.paramsList = res.data.result; //获取的搜索总数据条数 -- 数据分割
            //假设没有分页 ， 需要处理分页
            this.total = res.data.result.length;
            this.pageSize = 3;
            this.tableData = res.data.result.slice(0, 3);
            this.type = 2;
          } else {
            this.tableData = [];
            this.total = 1;
            this.pageSize = 1;
            this.type = 1;
          }
        });
    },
    // 点击显示弹框，配置规格参数
    showParams() {
      this.$refs.dialog.dialogVisible = true;
      this.title='添加规格与参数'
    },
    // 删除规格参数
    deleteParams(index, row) {
      this.$confirm("您将永久删除该该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api
            .getDeleteParams({
              id: row.id,
            })
            .then((res) => {
              console.log(res.data);
              if (res.data.status === 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                //视图更新
                this.getHttp(1);
              } else {
                this.$message({ type: "info", message: "已取消删除" });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //编辑商品
    handleParams(index, row) {
      // console.log(index,row);
      //1.点击编辑得按钮,显示弹框 2.弹框上显示上回得数据展示 - 当前得行得数据
      this.$refs.dialog.dialogVisible = true;
      this.title = "编辑规格与参数";
      this.dialogEditId = row.id;
    }, 
  },

  mounted() {
    this.getHttp();
  },
};
</script>

<style lang="less" scoped>
.params {
  margin: 10px;
}
.nav {
  padding: 10px;
}
.header {
  display: flex;
  height: 70px;
  padding: 10px;
  align-items: center;
  .el-button {
    height: 40px;
    margin-left: 20px;
  }
}
.myTable {
  margin: 10px auto;
}
</style>